<!DOCTYPE html> 
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sam first Stu Managment System</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<header>
		<!-- flex 使名称居中-->
		<div>
			<h1>Sam9029 Student Managment System</h1>
			<h1>Sam9029 Stu MS</h1>
		</div>
		<!-- 登录的绝对定位 -->
		<div>
			<ul>
				<li><a href="./login.html">Login</a></li>
				<li><a href="./login.html">Register</a></li>
			</ul>
			<ul style="display:none;">
				<li>hi! sam9029</li>
			</ul>
		</div>
	</header>
	<main>
		<!-- 学生操作块 -->
		<section>
			<!-- add -->
			<div id="addStudentBox">
				<h3>新增学生信息</h3>
				<p><label for="studentName">姓名</label><br/><input type="text" id='studentName'></p>
				<p><label for="studentAge">年龄</label><br/><input type="number" id="studentAge"></p>
				<p>性别
					<label for="studentMale">男</label><input type="radio" id='studentMale' name='studentGender' value='male'>
					<label for="studentFemale">女</label><input type="radio" id="studentFemale" name='studentGender' value='female'>
				</p>
				<!-- 所属班级 JS 渲染  -->
				<p>所属班级
					<select name="classList" id="classList"></select>
				</p>
				<div> 
					<p class="uploadImgBox">选择头像: <input type="file" value="选择头像" id='uploadImg'></p>
					<p> <img src="./img/defaultImg.jpg" alt="stuImage" id="stuImageUpload"> </p>
				</div>
				<p><input type="button" value="确认新增" id="addStudentBtn"></p>
			</div>
			<!-- upgrade -->
			<div>
				<h3>修改学生信息</h3>
				<p><label for="upgradeName">姓名</label><br/><input type="text" id='upgradeName'></p>
				<p><label for="upgradeAge">年龄</label><br/><input type="text" id="upgradeAge"></p>
				<p>性别
					<label for="upgradeMale">男</label><input type="radio" id='upgradeMale' name='upgradeGender' value="male">
					<label for="upgradeFemale">女</label><input type="radio" id="upgradeFemale" name='upgradeGender' value="female">
				</p>
				<!-- 所属班级 JS 渲染  -->
				<p>所属班级
					<select name="upgradeClassList" id="upgradeClassList"></select>
				</p>
				<div> 
					<p class="uploadImgBox">选择头像: <input type="file" value="选择头像" id='upgradeImg'></p>
					<p> <img src="./img/defaultImg.jpg" alt="stuImage" id="stuImageUpgrade"> </p>
				</div>
				<p><input type="button" value="确认修改" id='upgradeStuInfoBtn'></p>
			</div>
		</section>

		<!-- 学生列表块 -->
		<section>
			<!-- 搜索 -->
			<div>
				<select name="searchType" id="searchType">
					<option value="name">名字</option>
					<option value="age">年龄</option>
					<option value="gender">性别</option>
				</select>
				<input type="text" placeholder="模糊查询" id="searchValue">
				<input type="button" placeholder="查询" id="searchBtn" value="查询">
			</div>

			<!-- 列表 -->
			<div>
				<table>
					<thead>
						<tr>
							<th>学生头像</th>
							<th>学生姓名</th>
							<th>学生年龄</th>
							<th>学生性别</th>
							<th>学生班级</th>
							<th>班级老师</th>
							<th>操作</th>
						</tr>
					</thead>
					<!--studentsInfo JS 渲染 -->
					<tbody id="studentsInfo"></tbody>
				</table>
			</div>

			<!-- 分页功能 -->
			<div id="pageInfoBox">
				<div>
					<p>
						<span id="currentPage">0</span> / <span id="totalPage">0</span> 页
						共<span id='totalStudent'> 0</span>条学生数据
					</p>
					<select name="pageSize" id="pageSize">
						<option value="5">5条/页</option>
						<option value="10">10条/页</option>
					</select>
				</div>
				<div>
					<input type="button" id="firstPageBtn" value="首页">
					<input type="button" id="lastPageBtn" value="尾页">
					<input type="button" id="prevBtn" value="prev">
					<input type="button" id="nextBtn" value="next">
				</div>
			</div>
		</section>

		<!-- 老师操作块 -->
		<section>
			<!-- add teacher -->
			<div>
				<h3>新增老师信息</h3>
				<p><label for="teacherName">姓名</label><br/><input type="text" id='teacherName'></p>
				<p><input type="button" value="确认新增" id="addTeacher"></p>
			</div>
			<!-- add class -->
			<div>
				<h3>新增班级信息</h3>
				<p><label for="className">班级名称</label><br/><input type="text" id='className'></p>
				<div>负责老师<br/>
					<!-- teacherList JS 渲染 -->
					<div id="teacherList"></div>
				</div>
				<p><input type="button" value="确认新增" id="addClassBtn"></p>
			</div>
		</section>
	</main>
	<!-- js引入顺序有要求 -->
	<script type="text/javascript" src='./js/jquery.min.js'></script>
	<script type="text/javascript" src='./js/userTokenDeal.js'></script>
	<script type="text/javascript" src='./js/students.js'></script>
	<script type="text/javascript" src='./js/teachers.js'></script>
	<script type="text/javascript" src='./js/classes.js'></script>
	<script type="text/javascript" src='./js/images.js'></script>
</body>
</html>
